<template>
	<view class="container">
		<block v-if="rechargeList.length > 0">
			<view class="recharge-item" v-for="(item, index) in rechargeList" :key="index">
				<view class="recharge-info">
					<view class="recharge-status">{{ item.paid == 0?'充值待提交':'充值成功已到账' }}</view>
					<view class="recharge-time">{{ item._add_time }}</view>
				</view>
				<view style="display: flex;flex-direction: column;align-items: right;">
					<view class="recharge-amount">
						{{ item.price }}
						<text style="font-weight: 500;font-size: 24rpx;margin-left: 10rpx;">USDT</text>
					</view>
					<view class="recharge-state">
						<text :class="item.paid == 0?'pending':'success'">{{ item.paid_type }}</text>
						<!-- pending, success -->
					</view>
				</view>
			</view>
			<view style="display: flex;flex-direction: column;align-items: center;
			height: 80rpx;justify-content: center;">
				<view v-if="loadingShow" style="display: flex;align-items: center;">
					<view class="loading"></view>
					<view style="margin: 0 20rpx;color: #999;font-size: 28rpx;">拼命加载中~</view>
				</view>
				<view v-else style="font-size: 28rpx;color: #999;">暂无更多数据了~</view>
			</view>
		</block>
		<block v-else>
			<emptyPage :title="$t(`暂无充值的记录哦～`)"></emptyPage>
		</block>
	</view>
</template>

<script>
	import {
		getRecord
	} from "@/api/recharge.js"
	import emptyPage from '@/components/emptyPage.vue';
	export default {
		components: {
			emptyPage
		},
		data() {
			return {
				params: {
					page: 1
				},
				rechargeList: [],
				loadingShow: false
			}
		},
		onLoad() {
			this.getRecord()
		},
		onReachBottom() {
			if(!this.loadingShow) return
			this.params.page++
			this.getRecord()
		},
		methods: {
			getRecord() {
				getRecord(this.params).then(res => {
					console.log(res)
					const {
						list
					} = res.data
					this.rechargeList = this.rechargeList.concat(list)
					
					if(list.length <= 0) {
						this.loadingShow = false
					}else {
						this.loadingShow = true
					}
				}).catch((err) => {
					this.$util.Tips({
						title: err
					});
				})
			},
		}
	}
</script>

<style>
	.container {
		background-color: #f8f8f8;
		padding: 15px;
	}

	.recharge-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		padding: 15px;
		margin-bottom: 10px;
		border-radius: 5px;
	}

	.recharge-info {
		flex: 1;
	}

	.recharge-status {
		font-size: 14px;
		color: #333;
		margin-bottom: 5px;
	}

	.recharge-time {
		font-size: 12px;
		color: #999;
		margin-top: 20rpx;
	}

	.recharge-amount {
		font-size: 16px;
		color: #333;
		font-weight: bold;
		/* margin: 0 15px; */
	}

	.recharge-state {
		font-size: 12px;
		margin-left: auto;
		margin-top: 20rpx;
	}

	.success {
		color: #00aa00;
	}

	.pending {
		color: #007aff;
	}
	
	.loading {
	  width: 50rpx;
	  height: 50rpx;
	  border: 2rpx solid #999;
	  border-top-color: transparent;
	  border-radius: 100%;
	
	  animation: circle infinite 0.75s linear;
	}
	
	// 转转转动画
	@keyframes circle {
	  0% {
	    transform: rotate(0);
	  }
	  100% {
	    transform: rotate(360deg);
	  }
	}
</style>